{% load static %}
{# 首页的base #}
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>{{ page_title }}</title>
    <meta name="description" content="ExtraXue's Personal Home Page">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/head-icon-64_64.ico' %}">

    <!-- baidu -->
    <meta name="baidu-site-verification" content="code-AuA8LfPEE6" />


    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    {% block ext_css %}
        <!-- css -->
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css" media="all">
        <link rel="stylesheet" href="{% static 'css/all.min.css' %}" type="text/css" media="all">
        <link rel="stylesheet" href="{% static 'css/simple-line-icons.css' %}" type="text/css" media="all">
        <link rel="stylesheet" href="{% static 'css/slick.css' %}" type="text/css" media="all">
        <link rel="stylesheet" href="{% static 'css/jquery.mCustomScrollbar.min.css' %}" type="text/css" media="all">
        <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" media="all">
    {% endblock %}

</head>
<body>

<!-- 预加载 -->
<div id="preloader">
    <div class="outer">
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
</div>


<div class="site-wrapper">

    <!-- mobile header -->
    <div class="mobile-header py-2 px-3 mt-4">
        <button class="menu-icon mr-2">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <a href="home.html" class="logo"><img src="{% static 'images/head-icon-64_64.ico' %}" alt="Extra Xue"/></a>
        <a href="home.html" class="site-title dot ml-2">Extra Xue</a>
    </div>


    {% block nav_2 %}
    
    {% endblock %}


    <header class="left float-left shadow-dark" id="header">
        <div class="nav_title">
            {% block nav_title %}

            {% endblock %}
        </div>

        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <!-- navigation menu -->
        <div class="header-inner d-flex align-items-start flex-column">
            {#左侧导航栏，单独拿出来,里面的内容根据不同的场景进行填充#}
            {% block nav %}

            {% endblock %}
        </div>
    </header>


    {# 右侧内容栏 #}
    {% block content %}

    {% endblock %}

</div>

<!-- Go to top button -->
<a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a>


{# 扩展scripts #}
{% block ext_js %}
    <!-- 通用SCRIPTS -->
    <script src="{% static 'js/jquery-1.12.3.min.js' %}"></script>
    <script src="{% static 'js/jquery.easing.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'js/jquery.counterup.min.js' %}"></script>
    <script src="{% static 'js/jquery.mCustomScrollbar.concat.min.js' %}"></script>
    <script src="{% static 'js/isotope.pkgd.min.js' %}"></script>
    <script src="{% static 'js/infinite-scroll.min.js' %}"></script>
    <script src="{% static 'js/imagesloaded.pkgd.min.js' %}"></script>
    <script src="{% static 'js/slick.min.js' %}"></script>
    <script src="{% static 'js/contact.js' %}"></script>
    <script src="{% static 'js/validator.js' %}"></script>
    <script src="{% static 'js/custom.js' %}"></script>
{% endblock %}

</body>
</html>